<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap flex弹性布局(上)</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<style>
    main{
        margin: 20px;
    }
</style>
<body>
    

    <main>

        <div class="shadow d-flex m-2 p-2 bg-secondary text-light">flex弹性布局示例</div>

        <br>

        <div class="shadow d-flex m-2 p-2 bg-secondary text-light flex-row">
            <div class="ml-2 border border-info">选项1</div>
            <div class="ml-2 border border-info">选项2</div>
            <div class="ml-2 border border-info">选项3</div>
        </div>

        <br>

        <div class="shadow d-flex m-2 p-2 bg-secondary text-light flex-row-reverse">
            <div class="ml-2 border border-info">选项1</div>
            <div class="ml-2 border border-info">选项2</div>
            <div class="ml-2 border border-info">选项3</div>
        </div>

        <br>

        <div class="shadow d-flex m-2 p-2 bg-secondary text-light flex-column">
            <div class="ml-2 border border-info">选项1</div>
            <div class="ml-2 border border-info">选项2</div>
            <div class="ml-2 border border-info">选项3</div>
        </div>

        <br>

        <div class="shadow d-flex m-2 p-2 bg-secondary text-light flex-column-reverse">
            <div class="ml-2 border border-info">选项1</div>
            <div class="ml-2 border border-info">选项2</div>
            <div class="ml-2 border border-info">选项3</div>
        </div>

        <br>

        <div class="shadow d-flex m-2 p-2 bg-secondary text-light justify-content-between">

            <div class="ml-2 border border-info">选项1</div>
            <div class="ml-2 border border-info">选项2</div>
            <div class="ml-2 border border-info">选项3</div>
            <div class="ml-2 border border-info">选项4</div>
            <div class="ml-2 border border-info">选项5</div>
        </div>

        <br>

        <div class="shadow d-flex m-2 p-2 bg-secondary text-light justify-content-around">

            <div class="ml-2 border border-info">选项1</div>
            <div class="ml-2 border border-info">选项2</div>
            <div class="ml-2 border border-info">选项3</div>
            <div class="ml-2 border border-info">选项4</div>
            <div class="ml-2 border border-info">选项5</div>
        </div>

        <br>

        <div class="shadow d-flex m-2 p-2 bg-secondary text-light justify-content-center">

            <div class="ml-2 border border-info">选项1</div>
            <div class="ml-2 border border-info">选项2</div>
            <div class="ml-2 border border-info">选项3</div>
            <div class="ml-2 border border-info">选项4</div>
            <div class="ml-2 border border-info">选项5</div>
        </div>

        <br>

        <div class="shadow d-flex m-2 p-2 bg-secondary text-light justify-content-end">

            <div class="ml-2 border border-info">选项1</div>
            <div class="ml-2 border border-info">选项2</div>
            <div class="ml-2 border border-info">选项3</div>
            <div class="ml-2 border border-info">选项4</div>
            <div class="ml-2 border border-info">选项5</div>
        </div>

        <br>

        <div class="shadow d-flex m-2 p-2 bg-secondary text-light align-items-start" style="height: 100px;">

            <div class="ml-2 border border-info">选项1</div>
            <div class="ml-2 border border-info">选项2</div>
            <div class="ml-2 border border-info">选项3</div>
            <div class="ml-2 border border-info">选项4</div>
            <div class="ml-2 border border-info">选项5</div>
        </div>

        <br>

        <div class="shadow d-flex m-2 p-2 bg-secondary text-light align-items-center" style="height: 100px;">

            <div class="ml-2 border border-info">选项1</div>
            <div class="ml-2 border border-info">选项2</div>
            <div class="ml-2 border border-info">选项3</div>
            <div class="ml-2 border border-info">选项4</div>
            <div class="ml-2 border border-info">选项5</div>
        </div>

        <br>

        <div class="shadow d-flex m-2 p-2 bg-secondary text-light align-items-end" style="height: 100px;">

            <div class="ml-2 border border-info">选项1</div>
            <div class="ml-2 border border-info">选项2</div>
            <div class="ml-2 border border-info">选项3</div>
            <div class="ml-2 border border-info">选项4</div>
            <div class="ml-2 border border-info">选项5</div>
        </div>

        <br>

        <div class="shadow d-flex m-2 p-2 bg-secondary text-light align-items-baseline" style="height: 100px;">

            <div class="ml-2 border border-info">选项1</div>
            <div class="ml-2 border border-info">选项2</div>
            <div class="ml-2 border border-info">选项3</div>
            <div class="ml-2 border border-info">选项4</div>
            <div class="ml-2 border border-info">选项5</div>
        </div>

        <br>

        <div class="shadow d-flex m-2 p-2 bg-secondary text-light align-items-stretch" style="height: 100px;">

            <div class="ml-2 border border-info">选项1</div>
            <div class="ml-2 border border-info">选项2</div>
            <div class="ml-2 border border-info">选项3</div>
            <div class="ml-2 border border-info">选项4</div>
            <div class="ml-2 border border-info">选项5</div>
        </div>

        <br>

        <div class="shadow d-flex m-2 p-2 bg-secondary text-light" style="height: 100px;">

            <div class="ml-2 border border-info align-self-start">选项1</div>
            <div class="ml-2 border border-info align-self-center">选项2</div>
            <div class="ml-2 border border-info align-self-end">选项3</div>
            <div class="ml-2 border border-info align-self-baseline">选项4</div>
            <div class="ml-2 border border-info align-self-stretch">选项5</div>
        </div>

        

        <br>

        <div class="shadow d-flex m-2 p-2 bg-secondary text-light">

            <div class="ml-2 border border-info flex-fill">选项1</div>
            <div class="ml-2 border border-info flex-fill">选项2</div>
            <div class="ml-2 border border-info flex-fill">选项3</div>
            <div class="ml-2 border border-info flex-fill">选项4选项5.........</div>
            <div class="ml-2 border border-info flex-fill">选项6选项7.................... </div>
        </div>

    </main>

    <script src="../js/bootstrap.js"></script>
</body>
</html>